<template>
  <div class="five">
    <everyHorn />
    <div class="tital_home">
      <img src="@/assets/img/home-page/five_title.png" alt="">
      <h2>公告栏</h2>
    </div>
    <div v-if="btnFive" class="content flex_1">
      <vue-seamless-scroll :data="noticeList" :class-option="seamlessScrollOption" class="seamless">
        <ul>
          <li v-for="item in noticeList" :key="item.name" class="a-notice" @click="goDetail(item)">
            <i class="el-icon-table-lamp icon" />
            <p class="name">{{ item.title }}</p>
            <p class="time">{{ item.createTime }}</p>
            <i class="el-icon-position icon detail" />
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div v-else class="main flex_1 flex_column flex_center">
      暂无权限
    </div>
  </div>
</template>

<script>

import everyHorn from './every_horn.vue'
import { authoritymanagement } from '@/assets/js/utils.js'
export default {
  name: '',
  components: {
    everyHorn
  },
  data() {
    return {
      noticeList: [],
      btnFive: '' // 查看权限
    }
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    let RoleCode = this.$getLocalItem('jx_RoleCode')
    this.btnFive = authoritymanagement(RoleCode, 'lypc_btn_btnFive')
    if (this.btnFive) {
      this.getData()
    }
  },
  methods: {
    async getData() {
      let res = await this.$API.homePage.reqNoticePageCondition({ page: 1, size: 10, status: 'PASSED' })
      if (res) {
        this.noticeList = res.responseBody.records
      }
    },
    goDetail(item) {
      this.$router.push('/strategyManage/announceDetail?id=' + item.id + '&status=PASSED')
    }
  }
}
</script>

<style lang="scss" scoped>
.five {
  position: relative;
  width: 649px;
  height: 213px;
  background-image: url('~@/assets/img/home-page/five.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .a-notice {
    display: flex;
    align-items: center;
    line-height: 30px;
    cursor: pointer;
    .name {
      flex: 1;
      height: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 0 5px;
      // color: #666;
      &:hover {
        color: rgb(248, 151, 6);
      }
    }
    .time {
      margin-right: 5px;
    }
    .icon {
      font-size: 20px;
      color: rgb(248, 151, 6);
    }
  }
  .seamless {
    padding: 0 10px;
    height: 130px;
    overflow: hidden;
  }
}
</style>
